<template>
	<view class="page">
		<view class="u-page">
			<u-tabs  active-color='#E83814'  :list="nav" :current="current" @change="change" name="classifyName" bg-color="#F1F1F1"></u-tabs>
			
			<view v-for="(item,index) in list" :key="index" class="list" @click="go(item)">
				<view class="u-flex ">
					<u-image :src="item.cover" width="160" height="160" border-radius="10"></u-image>
					<view class="u-margin-left-20 u-border-bottom u-padding-bottom-20 " style="width: 500rpx;">
						<view style="font-weight: bold;">{{item.storeName}}</view>
						<view style="margin: 20rpx 0;font-size: 26rpx;">{{item.description}}</view>
						<view class="u-flex u-row-between" >
							<u-rate  v-model="item.score" disabled  active-color="#FABE00" size="24"> </u-rate>
							<view style="font-size: #333333;font-size: 22rpx;">{{item.distance}}</view>
						</view>
					</view>
				</view>
				<view v-for="(item1,index1) in item.goods" :key="index1" class="u-flex u-row-between u-padding-20 u-border-bottom">
					<view class="u-flex-1 " style="font-size: 32rpx;color: #FFA200;">￥{{item1.price}}</view>
					<view class="u-flex-3 u-text-left u-font-sm  ">{{item1.goodsName}}</view>
				</view>
				
			</view>
			
			<u-loadmore :status="initial.status" v-if="list.length" />
			
			<view class="empty" v-if="!list.length" >
				<u-empty mode="history" text="暂无门店"></u-empty>
			</view>
			
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<!-- <u-tabbar @change="select" :list="tabbar" :mid-button="true" height="100rpx" active-color="#0263C2"></u-tabbar> -->
	</view>
</template>

<script>
	
	import scan from '@/common/scan.js';
	
	import loader from '@/common/loadPage.js';
	export default {
		mixins: [loader],
		data() {

			return {
				tabbar: [],
				nav: [],
				current: 0,
				list: [],
				initial: {
					geturl: "/api/index/goods",
					parm: {
						goods_classify_id: 0,
						lat:'',
						lng:''
					},
					isPage: true
				},




			}
		},
		async onLoad() {
			this.initial.parm.lat= this.$store.state.location.lat ? this.$store.state.location.lat : 0;
			this.initial.parm.lng = this.$store.state.location.lng ? this.$store.state.location.lng : 0;
			this.tabbar = this.$store.state.tabbar;
			await this.goodsClassify()
			this.getGoods()
		},
		methods: {
			select(e){
				if(e==2){
					scan.scan()
				}
			},
			go(item){
				console.log(item)
				uni.navigateTo({
					url:'../../pages/store/detail?id='+item.id
				})
			},
			goodsClassify() {
				return new Promise((resolve, reject) => {
					this.$u.post('/api/index/goodsClassify', {
						type: 1
					}).then(res => {
						res.unshift({
							classifyName: '全部',
							id: 0
						})
						this.nav = res;
						resolve(res)
					}).catch(err => {

					})
				})

			},
			change(index) {
				this.current = index;
				this.initial.parm.goods_classify_id = this.nav[index].id;
				this.getGoods()
			}

		}
	}
</script>


<style>
	.page {
		background: #F1F1F1;
		min-height: 100vh;
	}
	.list{
		background: #fff;
	    width:700rpx;
		 margin: 20rpx auto;
		 padding: 20rpx;
	}
</style>
